<template>
    <div class="center">
        <el-row :gutter="10"
                class="center-container">
            <el-col :span="5"
                    class="no-border">
                <el-col :span="24"
                        class="has-border">
                    <el-col :span="24"
                            class="title-border">

                        <div class="circle"></div>
                        <div class="title">title</div>
                    </el-col>
                    <el-col :span="24"
                            class="content-border">content</el-col>
                </el-col>
                <el-col :span="24"
                        class="has-border">
                    <el-col :span="24"
                            class="title-border">

                        <div class="circle"></div>
                        <div class="title">title</div>
                    </el-col>
                    <el-col :span="24"
                            class="content-border">content</el-col>
                </el-col>
            </el-col>
            <el-col :span="14"
                    class="no-border">
                <el-col :span="24"
                        class="center-border">
                    <span class="horn1"></span>
                    <span class="horn2"></span>
                    <span class="horn3"></span>
                    <span class="horn4"></span>
                    <span class="horn4"></span>
                    <div class="center-title1">title</div>
                    <div class="center-title2">title</div>
                    <div class="center-table">
                        <div class="center-table1 has-border">
                            <el-col :span="24"
                                    class="title-border">

                                <div class="circle"></div>
                                <div class="title">title1</div>
                            </el-col>
                        </div>
                        <div class="center-table2 has-border">title2</div>
                    </div>
                    <el-row class="center-map">
                        <el-col :span="24"
                                class="center-map">
                            <div id="chartChinaMap"
                                 class="grid-content bg-purple-dark "
                                 :style="{width: '100%', height: '100%'}"></div>
                        </el-col>
                    </el-row>
                </el-col>

            </el-col>
            <el-col :span="5"
                    class="no-border">
                <el-col :span="24"
                        class="has-border">
                    <el-col :span="24"
                            class="title-border">

                        <div class="circle"></div>
                        <div class="title">title</div>
                    </el-col>
                    <el-col :span="24"
                            class="content-border">content</el-col>
                </el-col>
                <el-col :span="24"
                        class="has-border">
                    <el-col :span="24"
                            class="title-border">

                        <div class="circle"></div>
                        <div class="title">title</div>
                    </el-col>
                    <el-col :span="24"
                            class="content-border">content</el-col>
                </el-col>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import ChinaJson from "../../assets/china.json";
export default {
    data () {
        return {

        }
    },
    mounted () {
        this.drawLine();
    },
    methods: {
        drawLine () {
            this.$echarts.registerMap('china', ChinaJson);
            // 初始化echarts地图实例
            let chartChinaMap = this.$echarts.init(document.getElementById('chartChinaMap'));
            window.onresize = chartChinaMap.resize;
            // 绘制图表
            chartChinaMap.setOption({
                geo: {
                    map: "china",
                    roam: true,
                    zoom: 1.6,
                    center: [97.97, 34.91],
                    label: {
                        show: true,
                        color: "#fff",
                        fontSize: "8px",
                    },
                    itemStyle: {
                        areaColor: "transparent",
                        borderColor: "#1ec9e3",
                        borderWidth: 1,
                        shadowColor: 'rgba(1, 19, 49, 1)',
                        shadowBlur: 10
                    },
                    emphasis: {
                        label: {
                            color: "#f0e823"
                        },
                        itemStyle: {
                            areaColor: "rgba(2, 49, 119, 0.5)"
                        }
                    }
                },
                tooltip: {},

            });
        }
    }
}
</script>
<style lang="less" scoped>
.center {
    height: 100%;
    .center-container {
        height: 100%;
        .no-border {
            height: 100%;
            .has-border {
                border: solid 1px #0770b2;
                margin: 5px 0px;
                height: 48%;
                box-shadow: inset 0px 0px 3px 0.3px #1b92e3;
                box-sizing: border-box;
                padding-left: 0px !important;
                padding-right: 0px !important;
                .title-border {
                    text-shadow: 1px 1px 2px #444444;
                    width: 100%;
                    padding: 6px 0px;
                    border-top: 1px solid;
                    border-bottom: 1px solid;
                    border-image: -webkit-linear-gradient(
                            left,
                            #004c82 00%,
                            #004c82 25%,
                            #8ec4e8 50%,
                            #004c82 75%,
                            #004c82 100%
                        )
                        100 100 100 100;
                    .circle {
                        width: 6px;
                        height: 6px;
                        background-color: #24d5fe;
                        border-radius: 100%;
                        float: left;
                        position: relative;
                        top: 6px;
                        left: 19px;
                        box-shadow: 0 0 5px #24d5fe;
                    }
                    .title {
                        padding: 0 40px;
                        text-align: left;
                        font-size: 16px;
                    }
                }
            }
            .center-border {
                height: 98%;
                position: relative;
                color: #fff;
                background-color: transparent;
                background-image: linear-gradient(
                        0deg,
                        rgba(3, 117, 192, 0.2) 1px,
                        transparent 0
                    ),
                    linear-gradient(
                        90deg,
                        rgba(3, 117, 192, 0.2) 1px,
                        transparent 0
                    );

                background-size: 10px 10px;
                padding: 10px;
                width: 100%;
                border: #0f9aeb solid 2px;
                margin: 5px 0px;
                /*display: inline-block;
                *display: inline;*/
                padding: 10px;
                box-sizing: border-box;
                text-align: center;
                text-transform: uppercase;
                letter-spacing: 2px;
                border-radius: 2px;
                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
                overflow: hidden;
                display: flex;
                .horn1 {
                    width: 0;
                    height: 0;
                    border-width: 0 10px 10px;
                    border-style: solid;
                    border-color: transparent transparent transparent #16e3fe;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
                .horn2 {
                    width: 0;
                    height: 0;
                    border-width: 10px 10px 0px;
                    border-style: solid;
                    border-color: transparent transparent transparent #16e3fe;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                }
                .horn3 {
                    width: 0;
                    height: 0;
                    border-width: 0px 10px 10px;
                    border-style: solid;
                    border-color: transparent #16e3fe transparent transparent;
                    position: absolute;
                    top: 0;
                    right: 0;
                }
                .horn4 {
                    width: 0;
                    height: 0;
                    border-width: 10px 10px 0px;
                    border-style: solid;
                    border-color: transparent #16e3fe transparent transparent;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }
                .center-title1 {
                    background-image: url("../../assets/center-title.png");
                    background-size: 100% 100%;
                    width: 150px;
                    height: 68px;
                    position: absolute;
                    left: 1%;
                    padding-top: 16px;
                    z-index: 3;
                }
                .center-title2 {
                    background-image: url("../../assets/center-title.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    width: 190px;
                    height: 68px;
                    position: absolute;
                    left: 20%;
                    padding-top: 16px;
                    z-index: 3;
                }
                .center-table {
                    position: absolute;
                    width: 270px;
                    left: 4%;
                    top: 44%;
                    z-index: 3;
                }
                .center-table1 {
                    width: 260px;
                    height: 200px;
                    box-shadow: inset 0px 0px 5px 0.8px #1b92e3;
                }
                .center-table2 {
                    width: 260px;
                    height: 80px;
                    margin-top: 5px;
                    padding: 10px;
                    box-shadow: inset 0px 0px 5px 0.8px #1b92e3;
                }
                .center-map {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>